<template>
  <div class="count">
    <div v-for="(item, index) in list" :key="index" class="type">
      <!--      <i class="icon" :class="'icon' + `${index}`"></i>-->
      <div class="info" @click="handleClick(item.id)">
        <span class="name">{{ item.name }}</span>
        <span class="number">{{ formatNumThousand(item.value) }}<span class="unit">处</span></span>
      </div>
    </div>
  </div>
</template>
<script setup>
import { reactive, watch } from 'vue'
import { inject } from 'vue'
const sharedMessage = inject('sharedMessage')
const props = defineProps({
  data: {
    type: Array,
    default: () => {
      return []
    }
  }
})
const list = reactive([
  {
    name: '集热管破损',
    value: 0,
    id: 1
  },
  {
    name: '外镜破损',
    value: 0,
    id: 2
  },
  {
    name: '内镜破损',
    value: 0,
    id: 3
  },
  {
    name: '集热管失真空',
    value: 0,
    id: 4
  },
  {
    name: '集热管弯曲',
    value: 45,
    id: 5
  },
  {
    name: '集热管变形',
    value: 0,
    id: 6
  }
])
const formatNumThousand = (num) => {
  return (num + '').replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ',')
}
watch(
  () => props.data,
  (newV) => {
    newV.forEach((item, index) => {
      list[index].value = item
    })
  }
)

function handleClick(item) {
  sharedMessage.value = item
}
</script>

<style scoped lang="scss">
.count {
  width: 100%;
  padding: 0.2rem;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  .type {
    width: 1.55rem;
    height: 0.7rem;
    padding-top: 0.1rem;
    display: flex;
    justify-content: space-between;
    //.icon {
    //  width: 0.23rem;
    //  height: 0.28rem;
    //  margin-top: 0.2rem;
    //  background: url('../../../assets/images/home/icon-bus.png');
    //  background-size: 100%;
    //}
    .info {
      width: 1rem;
      height: 0.7rem;
      text-align: left;
      display: flex;
      flex-direction: column;
      .name {
        font-size: 0.16rem;
        width: 1.64rem;
        padding-top: 0.04rem;
      }
      .number {
        font-size: 0.26rem;
        //padding-top: 0.1rem;
        color: #18ebfe;
      }
      .unit {
        font-size: 0.14rem;
        margin-left: 0.06rem;
      }
    }
    //.icon2 {
    //  background: url('../../../assets/images/home/icon-bus.png') no-repeat center center/100% 100%;
    //}
  }
}
</style>
